<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 100px;
				width: 6.25rem;
				background-color: red;
				margin: 10px;
			}
			
			button{
				height: 100px;
				width: 6.25rem;
				background-color: red;
				margin: 10px;
				/* padding: 20px; */
				/* box-sizing: content-box; */
	
			}
			
			#centerbtn{
				background-color: green;
				/* margin-top: 10px;
				margin-right: 20px;
				margin-bottom: 30px;
				margin-left: 40px; */
				/* margin: 20px 40px; */
				height: 100px;
				width: 100px;
				/* margin: 20px; */
				padding: 20px;
				box-sizing: content-box;
			}
		</style>
	</head>
	<body>
		<!--
			针对块级元素：正常情况下，上下外边距取大值
		-->
		<div></div>
		<div></div>
		<hr >
		<!--
			内联块级元素：外边距一律叠加
		-->
		<button></button><button></button><button></button><br >
		<button></button><button id="centerbtn"></button><button></button><br />
		<button></button><button></button><button></button>
		
		
		<!--
			在内边距中要注意内边距对盒子大小的影响：
				盒子分为两类：
					内容盒子(W3C   content-box):内边距会使盒子变大  height:wight为内容宽高
					边框盒子(IE    border-box):内边距会压缩内容     height:widght为盒子宽高
		-->
		
	</body>
</html>
